<template>
	<view class="song-item">
		<view class="song-index">{{index+1}}</view>
		<view class="song-content">
			<view class="song-name">{{songName}}</view>
			<view class="song-other">
				<image src="../../static/sq_icon.png" mode="widthFix"></image>
				<view class="singer">{{singer}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			index: {
				type:Number
			},
			itemId:{
				type:Number
			},
			singer: {
				type:String
			},
			songName: {
				type:String
			}
		}
	}
</script>

<style scoped>
	.song-item {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		padding: 10rpx 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.song-index {
		width: 10%;
		font-size: 34rpx;
		color: #333;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.song-content {
		display: flex;
		width: 88%;
		flex-direction: column;
		justify-content: space-between;
	}
	.song-name {
		font-size: 30rpx;
		margin-bottom: 20rpx;
		font-weight: bold;
	}
	.song-other {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.song-other image {
		width: 50rpx;
	}
	.song-other .singer {
		font-size: 28rpx;
		line-height: 28rpx;
		padding-left: 10rpx;
	}
</style>
